[CSS] background 배경 고정하기, background-attachment

CSS를 사용하여 백그라운드 이미지를 고정하는 방법에 대하여 알아봅니다. 즉 스크롤을 이동해도 동일한 위치에 계속 fixed 된 상태로 보이게 하려면 어떻게 할까요? 아래에서 알아보세요.

# CSS를 사용하여 background 고정하는 방법

하지만 백그라운드 이미지만 고정하길 원하면 사실 이처럼 레이어 전체를 고정(fixed)될 필요는 없겠죠. 이럴때 background-attachment 속성을 이용합니다.

이 속성을 사용하면 아래와 같은 옵션값으로 백그라운드를 조정할 수 있습니다. 아래는 속성에 사용할 수 있는 값이니다. scroll과 fixed를 사용할 수 있습니다.

• scroll  //  스크롤에 따라 이동하는 방법(Default)
• fixed  //  항상 고정된 이미지로 동작
  

사이트 내에서 스크롤을 통해 영역을 이동해도 뒤에 위치한 배경에 적용된 background-image 속성으로 움직이지 않고 고정된 형태로 나타나는 것을 볼 수 있습니다.

쉽게 생각하면 background-attachment 속성을 사용하여 현재의 요소에 마치 position: fixed; 속성값을 사용한 것처럼 나타나게 되죠. 그럼 아래에서 예제와 직접 어떻게 나타나는지 확인해보세요.

# background-attachment 동작해보기

아래의 이미지 두 개는 동일한 이미지를 각각 다른 값으로 적용하였습니다. 실제로 스크롤을 동작해보면 그 차이를 알 수 있습니다.

@ background-attachment: fixed; 값 사용하는 경우



@ background-attachment: scroll; 값 사용하는 경우


직접 동작해보면 확실히 그 차이를 알 수 있습니다. 배경 이미지가 스크롤과 함께 이동하거나 스크롤과 상관없이 이동하지 않을 수 있죠. 이처럼 배경 이미지를 고정하는 방법은 많이 사용됩니다. 요즘은 단순하게 고정되는 것 뿐만 아니라 서서히 이동하는 애니메이션 효과 역시 많이 사용됩니다.

! 백그라운드 배경 고정 다른 방법 알아보기

다른 방법은 새로운 엘리먼트를 레이어로 추가하여 이 레이어를 고정시키는 방법입니다. position: fixed를 사용하면 해당 레이어를 고정할 수 있죠. 그리고 그 위에 배경 이미지를 위치하는 방법입니다. 생각해보면 이 방법도 매우 간단할 것입니다.

여기까지 배경 이미지를 고정하는 방법에 대하여 알아보았습니다.